<template>
  <div class="user-info-container">
    <h1 class="user-name">用户信息</h1>
    <el-card class="user-details">
      <div class="user-detail-item" v-for="(value, key) in userDetails" :key="key">
        <strong>{{ key }}：</strong>{{ value }}
      </div>
    </el-card>

    <h2 class="favorite-restaurants-title">收藏的餐厅</h2>
    <el-row :gutter="20">
      <el-col :span="8" v-for="restaurant in favoriteRestaurants" :key="restaurant.id">
        <el-card :body-style="{ padding: '0px' }" class="restaurant-card">
          <img :src="`/images/${restaurant.image}`" class="image" />
          <div style="padding: 14px;">
            <span class="restaurant-name">{{ restaurant.name }}</span>
            <div class="bottom">
              <time class="time">{{ restaurant.address }}</time>
              <el-button type="text" class="button" @click="goToRestaurantDetails(restaurant.id)">查看详情</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <h2 class="activities-title">历史操作记录</h2>
    <el-timeline>
      <el-timeline-item v-for="activity in activities" :key="activity.id" :timestamp="activity.timestamp" placement="top">
        <el-card>
          <h4>{{ activity.content }}</h4>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: 'bmy',
      email: 'bmy@example.com',
      preferences: '中式美食',
      accountType: '普通会员',
      lastOrder: '2024-10-01 12:00 PM',
      coupons: [
        { id: 1, name: '满100减20' },
        { id: 2, name: '新用户立减10元' }
      ],
      favoriteRestaurants: [
        { id: 1, name: '餐厅A', address: '地址A', image: '1.jpg' },
        { id: 2, name: '餐厅B', address: '地址B', image: '2.jpg' }
      ],
      activities: [
        { id: 1, content: '评论了餐厅A', timestamp: '2024-01-01' },
        { id: 2, content: '收藏了餐厅B', timestamp: '2024-01-02' }
      ]
    };
  },
  computed: {
    userDetails() {
      return {
        用户名: this.username,
        邮箱: this.email,
        偏好: this.preferences,
        账号类型: this.accountType,
        最近订单: this.lastOrder,
        卡券: `${this.coupons.length}张`
      };
    }
  },
  methods: {
    goToRestaurantDetails(id) {
      this.$router.push(`/restaurant/${id}`);
    }
  }
};
</script>

<style scoped>
.user-info-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.user-name,
.favorite-restaurants-title,
.activities-title {
  color: #333;
  font-weight: bold;
  margin-bottom: 20px;
}

.user-details {
  background-color: #f5f5f5;
  border-radius: 8px;
  padding: 10px; /* 减小内部填充 */
  margin-bottom: 20px;
}

.user-detail-item {
  margin: 0;
  line-height: 1.2; /* 减小行高 */
  font-size: 14px; /* 减小字体大小 */
  display: flex;
  align-items: center;
}

.user-detail-item strong {
  width: 100px; /* 固定宽度，确保标签对齐 */
  display: inline-block;
}

.restaurant-card {
  transition: transform 0.3s ease-in-out;
}

.restaurant-card:hover {
  transform: scale(1.05);
}

.image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.restaurant-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
  color: #409EFF;
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 768px) {
  .el-row {
    flex-direction: column;
  }

  .el-col {
    margin-bottom: 20px;
  }
}
</style>